<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">演员管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>演员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          v-model="searchForm.actorName"
          placeholder="请输入演员姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">演员列表</el-divider>
    <person-item
      v-for="item in actorList"
      :key="item.id"
      :id="item.id"
      :name="item.actor_name"
      :avatar="item.actor_avatar"
      @delete="onDelete(item.id)"
    ></person-item>
  </div>
</template>

<script>
import PersonItem from "../../components/PersonItem.vue";
export default {
  components: { PersonItem },
  data() {
    return {
      actorList: null, //绑定演员列表
      searchForm: {
        actorName: "",
      },
    };
  },
  //页面挂载完毕执行
  mounted() {
    //加载演员列表
    this.loadActorList();
  },
  methods: {
    //监听删除成功事件
    onDelete(id) {
      this.$http.ActorApi.delete({ id: id }).then((res) => {
        console.log("删除演员请求", res);
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.loadActorList();
        }
      });
    },
    // 提交搜索按钮时执行
    onSearch() {
      if (!this.searchForm.actorName.trim()) {
        //如果不合法
        this.loadActorList();
      }
      //发送请求，模糊查询演员列表
      let name = this.searchForm.actorName;
      this.$http.ActorApi.listByName({ name }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.actorList = res.data.data;
        }
      });
    },
    loadActorList() {
      this.$http.ActorApi.list({ page: 1, pagesize: 100 }).then((res) => {
        console.log("加载演员列表", res);
        if ((res.data.code = 200)) {
          this.actorList = res.data.data;
        }
      });
    },
  },
};
</script>

<style scoped>
.actor-item {
  display: inline-block;
  margin: 20px 20px 0px 0px;
  text-align: center;
}
.actor-item div {
  font-size: 0.9em;
}
</style>